<template>
    <div class="box"> 
        <div class="wang">
            <a href="#/wang">
            <img :src="pics[0][0].s_photos[0].path" alt="">
            </a>
        </div>
        <div class="flag">
            <img :src="pics[0][1].s_photos[0].path" alt="">
        </div>
        <div class="jointly" :style="{'backgroundImage':'url('+pics[0][2].s_photos[0].path+')'}">
            <!-- <img :src="pics[0][2].s_photos[0].path" alt=""> -->
            <div class="container">
                <div class="jointly-join" :style="{'backgroundImage':'url('+pics[0][3].s_photos[0].path+')'}">
                    <div class="hover">
                        <img class="hoverup-cover" :src="pics[0][4].s_photos[0].path" alt="">
                    </div>
                </div>
                <div class="jointly-join" :style="{'backgroundImage':'url('+pics[0][5].s_photos[0].path+')'}">
                    <div class="hover">
                        <img class="hoverup-cover" :src="pics[0][6].s_photos[0].path" alt="">
                    </div>
                </div>
                <div class="jointly-join" :style="{'backgroundImage':'url('+pics[0][7].s_photos[0].path+')'}">
                    <div class="hover">
                        <img class="hoverup-cover" :src="pics[0][8].s_photos[0].path" alt="">
                    </div>
                </div>
                <div class="jointly-join" :style="{'backgroundImage':'url('+pics[0][9].s_photos[0].path+')'}">
                    <div class="hover">
                        <img class="hoverup-cover" :src="pics[0][10].s_photos[0].path" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="custom-links">
            <img :src="pics[0][11].s_photos[0].path" alt="">
        </div>
        <div class="custom-links">
            <img :src="pics[0][12].s_photos[0].path" alt="">
        </div>
        <div class="custom-links">
            <img :src="pics[0][13].s_photos[0].path" alt="">
        </div>
        <div class="custom-links">
            <img :src="pics[0][14].s_photos[0].path" alt="">
        </div>
        <div class="custom-links shoes">
            <img :src="pics[0][15].s_photos[0].path" alt="">
        </div>
        <div class="custom-links shoes2">
            <img :src="pics[0][16].s_photos[0].path" alt="">
        </div>

    </div>
</template>

<script>
import {carousel} from '../assets/request'
export default {
    data(){
        return{
            pics:[]
        }
    },
    async created(){
        let res = await carousel({
            site_id:1,
            project_id:101
        })
        this.pics.push(res.rows)
    }
}
</script>

<style lang='scss' scoped>
    .box{
        width: 100%;
        background-color: #0c1011;
        display: flex;
        flex-direction: column;
        align-items: center;
        .wang{
            width: 1920px;
            height: 1260px;
        }
        .flag{
            width: 1920px;
            height: 600px;
        }
        .jointly{
            width: 1920px;
            height: 724px;
            
            .container{
                width: 1200px;
                height: 578px;
                margin: 0 auto;
                margin-top: 50px;
                background-color: pink;
                display: flex;
                .jointly-join{
                    width: 300px;
                    height: 578px;
                    .hover{
                        width: 100%;
                        height: 100%;
                        position: relative;
                        overflow: hidden;
                        transition: all 1s;
                        &:hover{
                            background-color: rgba($color: #000000, $alpha: .5);
                            &>img{
                                opacity: 1;
                                bottom: 0;
                            }
                        }
                        .hoverup-cover{
                            width: 300px;
                            // height: 390px;
                            opacity: 0;
                            position: absolute;
                            bottom: -50px;
                            left: 0;
                            transition: all 1s;
                        }
                    }
                }
            }
        }
        .custom-links{
            width: 1920px;
            height: 600px;
        }
        .shoes{
            height: 671px;
        }
        .shoes2{
            height: 748px;
        }
    }
    
</style>